<template>
    <el-form :inline="true" v-model="attrDataInfo.formData" ref="editorFormRef" size="small" label-width="44px">
        <el-form-item label="类型">
          <el-select id="resolution" v-model="attrDataInfo.formData.type" placeholder="请选择类型" @change="changeResolution">
              <el-option v-for="(item, index) in resolutions" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宽">
          <el-input v-model="attrDataInfo.formData.width" autocomplete="off" :min="480" :disabled="attrDataInfo.formData.type === '4000*4000' ? false: true" :show-word-limit="false" maxlength="5" clearable @blur="changeAttr('rwidth', attrDataInfo.formData.width)"></el-input>
        </el-form-item>
        <el-form-item label="高">
          <el-input v-model="attrDataInfo.formData.height" autocomplete="off" :disabled="attrDataInfo.formData.type === '4000*4000' ? false: true" :show-word-limit="false" maxlength="5" clearable @blur="changeAttr('rheight', attrDataInfo.formData.height)"></el-input>
        </el-form-item>
    </el-form>
</template>

<script>
import { resolutionArray } from "@/const/index";
export default {
    data() {
        return {
            resolutions: resolutionArray,
            // disableItem: true
        }
    },
    methods: {
      changeResolution(val) {
        // if(val !== '4000*4000') {
        //   this.disableItem = true
        // } else {
        //   this.disableItem = false
        // }
        this.$eventBus.$emit('changeResolution', val)
      },
      changeAttr(type, val) {
        const p = /^[[0-9]+$/
        if(type === 'rwidth' && val !== '') {
          if(!p.test(val)) {
              this.$message.error('宽输入不合法')
              return 
          }
          if(val < 400) {
            this.$message.error('模板最小宽度是400请先修改模板宽度')
            return 
          }
        }
        if(type === 'rheight' && val !== '') {
          if(!p.test(val)) {
              this.$message.error('高输入不合法')
              return 
          }
          if(val < 400) {
            this.$message.error('模板最小高度是400请先修改模板高度')
            return 
          }
        }
        this.$eventBus.$emit('changeAttr', type, val)
      }
    },
    inject: ['attrDataInfo']
}
</script>